<template>
  <div class="gouwuche">
 
  <div class="Cart">
    <h1>我的购物车</h1>

    <!-- 头部全选框 -->
    <div class="top">
      <input type="checkbox" v-model="isAllchecked" class="quanxuan">全选
    </div>

    <!-- 购物车中部 -->
    <ul class="center">

      <!-- 单个商品 -->
      <li class="centerA" v-for="(item,index) of carList" :key="item.s_good.id">
        <div class="select"><input type="checkbox" v-model="item.checked"></div>
        <div class="pic">
          <img :src="item.s_good.s_goods_photos[0].path" alt="">
        </div>
        <div class="name">{{item.s_good.name}}</div>
        <div class="price">
          ￥<span>{{item.s_good.price}}.00</span>
        </div>
        <div class="number">
          <button :disabled="item.num<=0" @click=numJian(index)>-</button>
          <input type="text" v-model="item.num">
          <button @click=numJia(index)>+</button>
        </div>
        <div class="subtotal">
          ￥<span>{{item.s_good.price * item.num}}.00</span>
        </div>
        <div class="del">
          <button @click="delOneGood(item.id)">删除</button>
        </div>

      </li>
      <div v-show="!carList[0]" class="tishi">您的购物车空空如也，赶紧去选购吧~</div>
    </ul>

    <!-- 购物车底部结算计算 -->
    <div class="bottom">
      <div class="bottomLeft">
        <input type="checkbox" v-model="isAllchecked" class="quanxuan">全选
        <button @click="delAllSelect">删除已选中</button>
      </div>
      <div class="bottomRight">
        <div class="jiesuan">
          <p>总计:￥<span>{{totalPrice}}.00</span></p>
          <p>已选择<span>{{totalNum}}</span> 件商品,优惠:￥0.00</p>
        </div>
        <button @click="goOrderList">立即结算</button>
      </div>

    </div>
  </div>
     
</div>
</template>

<script>
//引入获取购物车信息的请求函数
import { getCar } from "@/assets/request.js"

//引入删除购物车信息的请求函数
import { delCar } from "@/assets/request.js"

//引入更新购物车单条信息的请求函数
import { updateGoods } from "@/assets/request.js"

export default {

  //组件名字
  name: 'Cart',

  //组件数据
  data() {
    return {
      //准备一个空数组接收请求回来的购物车信息
      carList: [],
    }
  },

  //方法
  methods: {

    //消息弹框组件方法
    // open() {
    //     this.$notify({
    //       title: '偏移',
    //       message: '该商品已删除！',
    //       offset: 100
    //     });
    //   },


    //封装重新请求购物车信息的函数,操作完购物车数组信息后，需要调用这个更新购物车
    async getMyCart() {
      let res = await getCar({
        project_id: 267,
      })
      // console.log(res);
      //把请求回来的购物车信息赋值给空数组carList
      this.carList = res.data.result
      console.log(this.carList);

      this.carList.forEach((item) => {
        this.$set(item, 'checked', false)
      })
    },

    //删除已选中
    delAllSelect() {

      //准备一个空数组接收被选中的商品di
      let ids = []

      //遍历购物车数组，li的checked选中状态为true，就走到函数里面把id交出，添加到ids数组里
      this.carList.forEach((item) => {
        if (item.checked == true) {
          ids.push(item.id)
        }
      })

      //拿到被选中的商品id数组后，遍历它，然后调用单删函数，把遍历的id依次传给单删函数，单删函数里有调用重新请求购物车信息的函数，所以这里不用再次调用
      ids.forEach((item) => {
        this.delOneGood(item)
      })


    },

    //删除单个商品 接收到需要删除的商品id，把收到的id传给--请求删除购物车信息--的函数，可以拿一个变量来接，然后打印变量，控制台看返回信息，状态码为200是请求地址成功响应
    async delOneGood(id) {
      await delCar(
        id
      )

      //成功响应后，重新向地址请求最新购物车信息
      this.getMyCart()

       //删除完毕弹窗
       this.$notify({
          title: '已成功删除商品',
          message: '再继续逛逛吧~',
          offset: 100
        });


    },

    //减号按钮行为
    async numJian(index) {
      //购物车数组的商品数量--
      this.carList[index].num--;
      //调用函数，把当前商品的index传给方法---到请求函数地址里更新num选购数量
      this.update(index);

    },

    //加号按钮行为
    async numJia(index) {
      //购物车数组的商品数量++
      this.carList[index].num++;

      this.update(index);

    },

    //更新商品选购数量方法
    async update(index) {
      //调用请求函数--更新地址的购物车选购数量
      let res = await updateGoods(this.carList[index].id, {
        num: this.carList[index].num,
      })
      console.log(res);
    },

    //跳转订单页--路由跳转
    goOrderList() {

      //调用删除已选中功能
      this.delAllSelect()

      //过滤购物车数组，符合li的选择状态为true条件的留下，把数组js对象转成 JSON 字符串---JSON.stringify()
      let orderLiist = this.carList.filter((item) => item.checked)

      let orderLiist2 = JSON.stringify(orderLiist)

      //把JSON 字符串存到本地存储，订单页面再拿取数据渲染页面
      sessionStorage.setItem("orderList", orderLiist2)

      //跳转订单
      this.$router.push({
        name: 'order',
      })
    }

  },

  //计算属性
  computed: {

    //全选按钮---判断item的按钮是否都选中来控制全选按钮

    //购物车数组carList的长度
    total() {
      return this.carList.length;
    },

    //已选商品的数量
    selectTotal() {
      //数组进行叠加累计，判断每个item的select选择是否为真，真就+1，假就+0，初始值为0
      return this.carList.reduce((prev, item) => { return prev += item.checked ? 1 : 0 }, 0)
    },

    //是否全选
    isAllchecked: {

      get() {
        //判断长度和已选商品数量是否相等，返回布尔值给全选按钮，为true就是全选
        return this.total === this.selectTotal;
      },

      //当全选按钮点击后，传入点击后的状态值  vue.set只能给data里面某一个对象追加属性
      set(value) {
        this.carList.forEach((item) => {
          item.checked = value;
        })

      }
    },

    //已选中的总数量
    totalNum() {
      //过滤后形成新的数组，然后进行叠加累计
      return this.carList.filter((item) => item.checked).reduce((prev, item) => (prev += item.num), 0)

    },

    // //总价格---数组过滤filter，再进行reduce叠加累计得出数值，返回该数值
    totalPrice() {
      return this.carList.filter((item) => item.checked).reduce((prev, item) => (prev += item.num * item.s_good.price), 0)

    },

  },


  //生命钩子--发送ajax请求
  async mounted() {
    this.getMyCart()

    // //请求购物车数据--把项目id传给对应函数，请求id对应的购物车信息，赋值给res
    // let res = await getCar({
    //   project_id: 267,
    // })
    // console.log(res);
    // //把请求回来的购物车信息赋值给空数组carList
    // this.carList = res.data.result

    // //全选影响单选，单选影响全选
    // //遍历请求回来的购物车数组，给每个item的单选框checked元素的checked状态设置为false，单选框checked元素动态绑定了我们设置的布尔值
    // this.carList.forEach((item) => {
    //   this.$set(item, 'checked', false)
    // })

    // // //请求删除购物车信息的数据
    // // let delCar = await delCar({

    // // })
  }
}

</script>

<style lang='scss' scoped>

.gouwuche{

background-color: gainsboro;
.Cart {
  width: 1400px;
  margin-left: 56px;
  background-color: gainsboro;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 30px;

  .quanxuan {
    width: 17px;
    height: 17px;
  }

  .top {
    width: 1300px;
    height: 44px;
    background-color: white;
    margin-bottom: 10px;
    border-bottom: 1px solid white;
    background-color: gainsboro;

    input {
      margin: 10px;

    }

  }

  ul {
    width: 1304px;
    // height: 300px;
    margin-bottom: 10px;

    li {
      width: 1300px;
      height: 160px;
      background-color: gainsboro;
      border: 1px solid white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      margin: 10px 0;
      border-radius: 10px;
    }

    li>div {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 20px;
    }

    li>div>span {
      color: red;
    }

    li>div:first-child>input {
      width: 20px;
      height: 20px;
    }

    li>div>button {
      width: 30px;
      height: 30px;
      font-size: 20px;
      padding: 5px 10px;
      cursor: pointer;
      border-radius: 50%;
      border: none;
      margin: 10px;
    }

    li>div.del>button {
      width: 80px;
      height: 30px;
      // background-color: #333333;
      background-color: transparent;
      border: 1px solid gray;
      border-radius: 0px;
      color: black;
      font-size: 14px;

      &:hover{
        background-color: #333333;
        color: white;
        transition: all 0.5s;
      }
    }

    li>div.number>input {
      width: 50px;
      height: 24px;
      font-size: 20px;
      text-align: center;
    }

    .select,
    .pic,
    .del {
      width: 100px;

      img {
        width: 140px;
        height: 140px;
      }
    }

    .name,
    .price,
    .subtotal {
      width: 200px;
    }

    .number {
      width: 300px;
    }

    .tishi {
      width: 100%;
      height: 70px;
      background-color: #f5f5f5;
      font-size: 30px;
      text-align: center;
      line-height: 70px;
      color: grey;
    }

  }

  .bottom {
    width: 1300px;
    height: 56px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid white;
    background-color: gainsboro;
    

    button {
      cursor: pointer;
    }

    .bottomLeft {
      width: 150px;
      height: 40px;
      margin: 10px;
      display: flex;
      justify-content: center;
      align-items: center;

      p {
        font-size: 22px;
      }

      button {
        width: 80px;
        height: 30px;
        margin-left: 15px;
        border: 1px solid gray;
        background-color: transparent;
        border-radius: 0px;
        color: black;

        &:hover{
          background-color: #333333;
          color: white;
        }
      }
    }

    .bottomRight {
      width: 390px;
      display: flex;

      .jiesuan {
        width: 170px;
        display: flex;
        flex-wrap: wrap;
        // background-color: pink;

        p {
          font-size: 22px;

          span {
            color: red;
          }

          &:last-child {
            font-size: 12px;
            color: gray;

            span {
              font-weight: bold;
            }
          }
        }

      }

      button {
        width: 220px;
        height: 56px;
        background-color: #333333;
        font-size: 20px;
        color: white;
        // border: 1px solid black;
        border: none;
        margin-left: 5px;

        &:hover{
          background-color: orange;
          transition: all 0.5s;
        }

      }
    }
  }
}
}
</style>
